<template>
    <div
        class="base-pop-panel-pop-container"
        :class="[type, screenRatio16_9 ? 'screen_16_9' : '']"
        :style="{
            height: valueOrStr(height),
            width: valueOrStr(width),
            right: valueOrStr(right),
            left: valueOrStr(left),
            top: valueOrStr(top),
            bottom: valueOrStr(bottom),
            pointerEvents: 'auto',
        }"
    >
        <div class="base-pop-panel-common-bg" />
        <div class="base-pop-panel-pop-detail">
            <div v-if="showHeader" class="base-pop-panel-title-line">
                <div class="base-pop-panel-title-left">
                    <slot name="title">
                        <div class="cursor-pointer">
                            {{ title }}
                        </div>
                    </slot>
                </div>
                <div v-if="showClose" class="base-pop-panel-close" @click="close"></div>
            </div>
            <div v-if="!showHeader && showClose" class="base-pop-panel-close absolute! right-20px top-20px z-10" @click="close"></div>
            <div class="base-pop-panel-content" :class="{'pt-20px! h-100%!': !showHeader}">
                <slot />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { PropType } from 'vue'
import { useGlobalStore } from '@/store/global'

const globalStore = useGlobalStore()
const screenRatio16_9 = computed(() => globalStore.screenRatio16_9)

/**
 * 定义props
 */
defineProps({
    /**
     * 标题
     */
    title: {
        type: String,
        default: '',
    },
    /**
     * 高度
     * 同时支持max-height特殊字段
     */
    height: {
        type: [Number, String],
        default: 400,
    },
    /**
     * 宽度
     */
    width: {
        type: [Number, String],
        default: 800,
    },
    /**
     * 是否显示header
     */
    showHeader: {
        type: Boolean,
        default: true,
    },

    showClose: {
        type: Boolean,
        default: true,
    },
    /**
     * 位置
     */
    type: {
        type: String as PropType<'left' | 'right' | 'center'>,
        default: 'center',
    },
    top: {
        type: [Number, String],
        // default: 160,
        default: 55,

    },
    left: {
        type: [Number, String],
        default: undefined,
    },
    right: {
        type: [Number, String],
        default: undefined,
    },
    bottom: {
        type: [Number, String],
        default: undefined,
    },
})

/**
 * 定义emit
 */
const emit = defineEmits(['close'])

// 处理像素
const valueOrStr = (val: string | number | undefined) => {
    if (typeof val === 'undefined') {
        return undefined
    } else if (val === 'max-height') {
        return 'calc(100% - 160px - 64px)'
    } else if (typeof val === 'string') {
        return val
    }
    return `${val}px`
}

// 面板关闭事件
const close = () => {
    emit('close')
}
</script>
